<template>
  <n-modal
    v-model:show="showModal"
    :on-after-leave="handleCancel"
  >
    <template #default>
      <div
        class="modal"
        :style="{ width: `${props.width}px` }"
      >
        <n-flex
          class="modal-space"
          justify="space-between"
          align="center"
          :style="{ borderBottom: `1px solid ${theme.borderColor}` }"
        >
          <span>{{ props.title }}</span>
        </n-flex>
        <n-scrollbar :style="{ height: `${props.height}px` }">
          <div style="padding: 12px 24px">
            <slot></slot>
          </div>
        </n-scrollbar>

        <n-flex
          class="modal-space"
          justify="flex-end"
          align="center"
          :style="{ borderTop: `1px solid ${theme.borderColor}` }"
        >
          <n-button
            size="small"
            @click="handleCancel"
            >取消</n-button
          >
          <n-button
            type="primary"
            size="small"
            @click="handleConfirm"
            >确定</n-button
          >
        </n-flex>
      </div>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
  import { useThemeVars } from 'naive-ui'

  const theme = useThemeVars()

  const props = withDefaults(defineProps<{ width?: number; title?: string; height?: number }>(), {
    width: 450,
    height: 380,
    title: '标题'
  })

  const emits = defineEmits(['cancel', 'confirm', 'update:show'])

  const showModal = defineModel<boolean>('show', {
    default: false
  })

  const handleCancel = () => {
    emits('cancel')
    emits('update:show', false)
  }

  const handleConfirm = () => {
    emits('confirm')
  }
</script>

<style scoped lang="scss">
  .n-modal {
    top: -60px;
  }
  .modal {
    border-radius: 4px;
    background: var(--n-color);
    &-space {
      box-sizing: border-box;
      padding: 12px 16px;
    }
  }
</style>
